import React, { useState } from 'react';
import { Card, Avatar, Row, Col, Button } from 'antd';
import {
  EditOutlined,
  EllipsisOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { SearchOutlined } from '@ant-design/icons';
// 页面跳转

export default () => {
  const { Meta } = Card;
  const cardList = [
    {
      avatar:
        'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
      title: '提案',
      description: '通过提案为社区做出决策',
    },
    {
      avatar:
        'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
      title: '投票',
      description: '通过投票为社区做出决策',
    },
    {
      avatar:
        'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
      title: '任务',
      description: '任务量化成员贡献',
    },
    {
      avatar:
        'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
      title: '空投',
      description: '空投激励用户',
    },
  ];
  return (
    <>
      <Card>
        <h1>dao管理工具</h1>
      </Card>
      <Row>
        {cardList.length >= 1 &&
          cardList.map((e) => (
            <Col xs={24} sm={12} md={12} lg={8} xl={6}>
              <Card
                actions={[
                  <SettingOutlined key="setting" />,
                  <EditOutlined key="edit" />,
                  <EllipsisOutlined key="ellipsis" />,
                ]}
              >
                <Meta
                  avatar={<Avatar src={e.avatar} />}
                  title={e.title}
                  description={e.description}
                />
              </Card>
            </Col>
          ))}
      </Row>
    </>
  );
};
